<template>
	<view class="conten" :style="{ backgroundImage: `url(${bgImage})` }">
	
		<view class="conten_main"  >
			<view style="margin: 10px 10px 20px 10px;background-color:#FEFEFE ;height: 30px;border-radius: 12px;padding: 7px;">
				<u-input shape="circle" border="none" fontSize="16px" >
					<template slot="prefix"  margin="0 3px 0 0">
						<u-row   justify="space-between"  gutter="10">
						    <u-col span="2">
						        <image src="/static/serachleft.png" style="width: 14px;height: 14px;"></image>
						    </u-col>
						    <u-col span="10">
						        <u--text text="输入运单号 |"  type="tips"></u--text>
						    </u-col>
						</u-row>
					</template>
					<template slot="suffix"  margin="0 3px 0 0">
						<image src="/static/scan.png" style="width: 14px;height: 14px;"></image>
					</template>
				</u-input>
			</view>
			<!-- 网点列表 -->
			<view v-for="(item, index) in indexList" :key="index">
				<view style="margin: 10px;border-radius: 12px;padding: 5px;background-color:#FEFEFE;">
					
				<u-row justify="space-between"  customStyle="padding: 10px;"  @click="spread(item.id)">
					<u-col span="5" >
						<text style="font-size: 16px;color: #000000;font-weight: bold;">{{item.name}}</text>
					</u-col>
					<u-col span="3" v-if="!item.isExpanded">
						<view style="display: flex; align-items: center;" >
							<span style="font-size: 12px;color:#999999 ;">网点件:</span>
							<span style="color: #000000;font-weight: bold">{{item.wdnum}}</span>
						</view>
					</u-col>
					<u-col span="3" v-if="!item.isExpanded">
						<view style="display: flex; align-items: center;" >
							<span style="font-size: 12px;color:#999999 ;">上门件:</span>
							<span style="color: #000000;font-weight: bold">{{item.smnum}}</span>
						</view>
					</u-col>
					<u-col  span="1" style="display: flex; justify-content: flex-end; align-items: center;">
						<image v-if="!item.isExpanded" src="/static/ex.png" class="right-image"  style="width: 7px;height: 12px" ></image>
						<image v-if="item.isExpanded" src="/static/sp.png" class="right-image"  style="width: 12px;height: 8px;padding-left: 20px;" ></image>
					</u-col>
				</u-row>
				<view v-if="item.isExpanded" style="background-color: white;">
					<u-row justify="space-between">
						<u-col span="6"  >
							<view style="margin-left: 10px;"><span style="font-size: 12px;color:#999999 ;">网点件：</span><span style="color: #5A9CFF;font-weight: bold">{{item.wdnum}}</span></view>
							<view style="margin-left: 10px;"><span style="font-size: 12px;color:#999999 ;">上门件：</span><span style="color: #FF5D5D;font-weight: bold">{{item.smnum}}</span></view>
						</u-col>
						<u-col span="6" >
							<view class="button-container">
							<u-button class="custom-style" type="primary" shape="circle" size="small" text="扫码送达" @click="scanarry"></u-button>
							<u-button class="custom-style" type="success" shape="circle" size="small" text="一键送达" @click="quitarry"></u-button>
							</view>
						</u-col>
					</u-row>
					<view style="margin: 10px;border-radius: 12px;padding: 10px;background-color:#F8F8F8;" v-for="(item1, index1) in deaiteList" :key="index1">
						<u-row justify="space-between" customStyle="margin-bottom: 10px;" >
							<u-col span="8"  >
								<view style="display: flex; align-items: center;" >
									<text style="font-size: 14px;color: #3B3B3B;">{{item1.code}}</text>
									<image src="/static/copy.png" style="width: 12px;height: 12px;margin-left: 5px;" @click="copy(item1.code)"></image>
								</view>
							</u-col>
							<u-col span="4"  >
								<text style="font-size: 12px;color: #666666;">{{item1.time}}</text>
							</u-col>
						</u-row>
						<u-row justify="space-between" >
							<u-col span="6"  >
								<text style="font-size: 15px;color: #000000;font-weight: bold;">{{item1.address}}</text>
							</u-col>
							<u-col span="6"  >
								<view class="button-container">
									<u-button customStyle="width: 86px;"  type="warning" shape="circle" size="small" text="现场签收" @click="sign"></u-button>
									<image style="width: 30px;height: 30px;" src="/static/phone.png"></image>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				value:"",
				value15: '',
				bgImage:'/static/bg.png',
				indexList: [],
				deaiteList: [],
			}
		},
		onLoad(e) {
			this.loadmore();
		
		
		},
		onHide() {
		},
		mounted() {},
		methods: {
			change(){
				
			},
			  scrolltolower() {
			        this.loadmore();
			      },
			      loadmore() {
			        for (let i = 0; i < 3; i++) {
			          this.indexList.push({
						  id:i,
			            name: "大风第七小学网点",
						wdnum:118,
						smnum:118,
						status:0,
						isExpanded:false,
			          },
					  {
						  id:100+i,
					    name: "大风第七小学网点",
					  						wdnum:118,
					  						smnum:118,
					  						status:1,
											isExpanded:false,
					  }
					  );
					  this.deaiteList.push({
						  wdid:10+i,
						  code:'3255 0000 2121 323',
						  time:'2月15号 18:00揽收',
						  address:'XXX花园小区XXXX',
					  })
			        }
			      },
				  spread(id){
						console.log("id:",id)
						 this.indexList = this.indexList.map(item => ({
						    ...item,
						    isExpanded: item.id === id ? !item.isExpanded : false
						  }));
						
							  
				  },
				  //扫码送达事件
				  scanarry(){
					  
				  },
				  //一键送达事件
				  quitarry(){
					  
				  },
				  //签收
				  sign(){
					  
				  },
				  copy(code){
				  	uni.setClipboardData({
				  	        data: code, 
				  	        success: () => {
				  	          this.isCopied = true;
				  	          setTimeout(() => {
				  	            this.isCopied = false;
				  	          }, 2000);  
				  	        },
				  	        fail: (err) => {
				  	          console.error('复制失败:', err);
				  	        }
				  	      });
				  }
		}
	}
</script>

<style lang="scss" scoped>
	.conten {
		width: 100%;
		height: 100vh;
		//position: relative;
		position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-size: cover;
		  z-index: 0; /* 确保背景在最底层 */
	}
	.conten_main {
		width: 100%;
		height: 100vh;
	}
.custom-style {
		color: #FFFFFF;
		width: 150rpx;
	}
	.button-container {
	  display: flex;
	  justify-content: space-between;  /* 两端对齐 */
	  align-items: center; /* 垂直居中对齐 */
	  width: 100%; /* 让容器铺满 */
	  gap: 10px; /* 按钮之间的间距 */
	  
	}
	.right-image {
	  position: relative;
	  width: 20px;
	  height: 20px;
	  transition: transform 0.3s ease-in-out; /* 可选，添加平滑的过渡效果 */
	}
</style>